<template>
  <!-- 代码生成 -->
  <div class="app-container">
    <div class="none2-border3 mainbox">
      <!-- 顶部操作 -->
      <div class="filter-container">
        <el-form ref="filterFormRef" :model="filterForm" :inline="true"
                 @submit.native.prevent>
          <el-form-item label="数据源" prop="dbName">
            <el-input
              v-model.trim="filterForm.dbName"
              placeholder="请输入内容"
              style="width: 200px;margin-right:10px"
              class="filter-item"
              clearable
              @keyup.enter.native="handleFilter"
            />
          </el-form-item>
          <el-form-item label="模块名" prop="moduleName">
            <el-input
              v-model.trim="filterForm.moduleName"
              placeholder="请输入内容"
              style="width: 200px;margin-right:10px"
              class="filter-item limit"
              maxlength="50"
              clearable
              @keyup.enter.native="handleFilter"
            />
          </el-form-item>
          <el-form-item label="服务名" prop="serviceName">
            <el-input
              v-model.trim="filterForm.serviceName"
              placeholder="请输入内容"
              style="width: 200px;margin-right:10px"
              class="filter-item limit"
              maxlength="50"
              clearable
              @keyup.enter.native="handleFilter"
            />
          </el-form-item>
          <el-form-item label="包名" prop="packageName">
            <el-input
              v-model.trim="filterForm.packageName"
              placeholder="请输入内容"
              style="width: 200px;margin-right:10px"
              class="filter-item limit"
              maxlength="50"
              clearable
              @keyup.enter.native="handleFilter"
            />
          </el-form-item>
          <el-form-item label="作者" prop="author">
            <el-input
              v-model.trim="filterForm.author"
              placeholder="请输入内容"
              style="width: 200px;margin-right:10px"
              class="filter-item limit"
              maxlength="50"
              clearable
              @keyup.enter.native="handleFilter"
            />
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <el-button
          class="filter-item"
          type="primary"
          @click="handleFilter"
        >
          搜索
        </el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      <!-- 表格 -->
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-button
            v-permission="['CODE_ADD_BUTTON']"
            class="filter-item"
            icon="el-icon-plus"
            type="primary"
            @click="create()"
          >
            新增
          </el-button>
          <el-button
            v-permission="['CODE_ADD_MORE_BUTTON']"
            class="filter-item"
            icon="el-icon-plus"
            @click="createMore()"
          >
            批量新增
          </el-button>
          <el-button
            v-permission="['CODE_GENERATE_MORE_BUTTON']"
            class="filter-item"
            icon="el-icon-plus"
            @click="generateMore()"
          >
            批量生成
          </el-button>
          <div class="flex-1" />
          <dt-dialog-column :columns="columns" @queryTable="getList" />
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          border
          :data="codeList"
          highlight-current-row
          style="width: 100%;"
          :row-key="getRowKey"
          :header-cell-style="headerCellStyle"
          @selection-change="handleSelectionChange"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column type="selection" :reserve-selection="true" width="55" />
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            :index="table_index"
          />
          <el-table-column
            v-if="columns[0].show"
            key="dbName"
            prop="dbName"
            label="数据源"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[1].show"
            key="tableName"
            prop="tableName"
            label="表名"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[2].show"
            key="tableComment"
            prop="tableComment"
            label="表说明"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[3].show"
            key="moduleName"
            prop="moduleName"
            label="模块名"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[4].show"
            key="businessName"
            prop="businessName"
            label="业务名"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[5].show"
            key="serviceName"
            prop="serviceName"
            label="服务名"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[6].show"
            key="packageName"
            prop="packageName"
            label="包名"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[7].show"
            key="author"
            prop="author"
            label="作者"
            show-overflow-tooltip
          />
          <el-table-column
            :key="Math.random()"
            fixed="right"
            label="操作"
            width="228"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-button
                v-permission="['CODE_UPDATE_BUTTON']"
                size="mini"
                @click="edit(row)"
              >
                修改
              </el-button>
              <el-button
                v-permission="['CODE_GENERATE_BUTTON']"
                size="mini"
                @click="codeGenerate(row)"
              >
                代码生成
              </el-button>
              <el-button
                slot="reference"
                v-permission="['CODE_DEL_BUTTON']"
                size="mini"
                type="danger"
                @click="remove(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <dt-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="filterForm.pageNo"
          :limit.sync="filterForm.pageSize"
          @pagination="getList"
        />
      </div>
      <more-add ref="moreAddRef" />
    </div>
  </div>
</template>
<script>
import { hasAuth } from '@/framework/utils/hasAuth'
import { saveAs } from 'file-saver'
import codeGenerationApi from '@/framework/api/codeGeneration'
import moreAdd from './components/moreAdd'
import dialogColumn from '@/framework/utils/mixins/dialogColumn'

export default {
  name: 'CodeList',
  components: { moreAdd },
  mixins: [dialogColumn],
  data() {
    return {
      hasAuth: hasAuth('ORG_POSITION_UPDATE_STATUS'),
      listLoading: false,
      codeList: [],
      codeListLength: 0,
      total: 0,
      filterForm: {
        dbName: '',
        moduleName: '',
        serviceName: '',
        packageName: '',
        author: '',
        pageNo: 1,
        pageSize: 10
      },
      dialogFormVisible: false,
      appList: '',
      // 列信息
      columns: [
        { prop: 'dbName', label: '数据源', show: true },
        { prop: 'tableName', label: '表名', show: true },
        { prop: 'tableComment', label: '表说明', show: true },
        { prop: 'moduleName', label: '模块名', show: true },
        { prop: 'businessName', label: '业务名', show: true },
        { prop: 'serviceName', label: '服务名', show: true },
        { prop: 'packageName', label: '包名', show: true },
        { prop: 'author', label: '创建者', show: true }
      ],
      multipleSelection: [],
      headerCellStyle: {
        backgroundColor: '#f2f2f2'
      }

    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 列表序号
    table_index(index) {
      return (this.filterForm.pageNo - 1) * this.filterForm.pageSize + index + 1
    },
    // 获取页面列表
    getList() {
      this.listLoading = true
      codeGenerationApi.page(this.filterForm).then((res) => {
        this.codeListLength = res.data.rows.length
        this.codeList = res.data.rows
        this.total = res.data.totalRows
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    // 搜索
    handleFilter() {
      this.$refs.table.clearSelection()
      this.filterForm.pageNo = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.filterFormRef.resetFields('filterForm')
      this.handleFilter()
    },
    create() {
      this.$router.push({
        path: './GenerationEdit'
      })
    },
    createMore() {
      this.$refs.moreAddRef.open()
    },
    edit(row) {
      this.$router.push({
        path: './GenerationEdit',
        query: {
          tableId: row.tableId
        }
      })
    },
    remove(row) {
      this.$dtMessageBox({ title: '提示', message: `确定要删除“${row.tableName}”吗?`, type: 'warning' }).then(() => {
        codeGenerationApi.removeGen({ tableId: row.tableId }).then((res) => {
          this.getList()
          this.$dtMessage({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.multipleSelection.forEach((item, index, multipleSelection) => {
            if (item.tableId === row.tableId) {
              multipleSelection.splice(index, 1)
              return multipleSelection
            } else {
              return multipleSelection
            }
          })
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getRowKey(row) {
      return row.tableId
    },
    // 代码生成
    codeGenerate(row) {
      this.showScreenLoading()
      codeGenerationApi.genCode({ tableId: row.tableId }).then(async (res) => {
        const blob = new Blob([res.data])
        saveAs(blob, `${row.moduleName}.zip`)
        this.hideScreenLoading()
      }).catch((res) => {
        this.hideScreenLoading()
      })
    },
    // 批量生成
    generateMore() {
      if (!this.multipleSelection || this.multipleSelection.length === 0) {
        this.$dtMessage({
          title: '失败',
          message: '请至少选择一项',
          type: 'error',
          duration: 2000
        })
        return
      }
      const ids = this.multipleSelection.map((res) => {
        return res.tableId
      }).join(',')
      codeGenerationApi.genCodeBatch({ tableIds: ids }).then(async (res) => {
        const blob = new Blob([res.data])
        saveAs(blob, 'genCode.zip')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
